<template>
	<div class="UnitC">
		<el-row>
			<el-col :span="24">
				<el-card style="margin-bottom: 20px;">
					<el-form ref="typeSearchRefs" :inline="true" class="demo-form-inline messageInput">
						<el-form-item label="类型名">
							<el-input v-model="searchData.propertyTypeName" maxlength="12" show-word-limit placeholder="请输入属性类型"></el-input>
						</el-form-item>
						<el-form-item label="类型编码">
							<el-input v-model="searchData.ptCode" maxlength="12" show-word-limit placeholder="请输入属性类型编码"></el-input>
						</el-form-item>
						<el-form-item class="btn">
							<el-button type="primary" @click="searchSubject()">查询</el-button>
							<el-button @click="resetValues()">重置</el-button>
						</el-form-item>
					</el-form>
				</el-card>
				<el-card>
					<el-table :data="tableData" @current-change="handleCurrentChange" border style="width: 100%">
						<el-table-column type="selection" width="50" align="center" :reserve-selection="true"></el-table-column>
						<el-table-column prop="propertyTypeName" label="属性类型"></el-table-column>
						<el-table-column prop="ptCode" label="属性类型编码"></el-table-column>
						<el-table-column label="操作" class-name="operation">
							<template slot="header">
								<el-button type="primary" @click="createMember">新增</el-button>
							</template>
							<template slot-scope="scope">
								<el-link type="primary" @click="editShow(scope.row)">编辑</el-link>
								<el-link type="primary" @click="del(scope.row.ptCode)">删除</el-link>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination background layout="total, sizes, prev,pager,  next, jumper" @size-change="sizeChange"
								   @current-change="currentChange" :page-sizes="[5, 10, 20, 30, 40]" :page-size="5"
								   :total="total">
					</el-pagination>
				</el-card>
			</el-col>
		</el-row>

		<el-dialog title="属性类别编辑" :visible.sync="memberModalStatus" :close-on-click-modal="false" width="40%"
				   :destroy-on-close="true">
			<el-form :model="modelData" :rules="rulesModelData" status-icon ref="modelData" label-width="100px"
					 :inline="false" size="normal">
				<el-row>
					<el-col :span="24">
						<el-form-item label="属性类别" prop="propertyTypeName">
							<!-- <el-input v-model="modelData.id" v-show="false"> </el-input> -->
							<el-input v-model="modelData.propertyTypeName" minlength="2" maxlength="12"
									  show-word-limit></el-input>
						</el-form-item>
						<el-form-item label="属性类别编码" prop="ptCode">
							<el-input v-model="modelData.ptCode" minlength="2" maxlength="12"
									  show-word-limit></el-input>
						</el-form-item>
						<el-form-item label="属性类别描述" prop="propertyTypeMemo">
							<el-input type="textarea" :rows="6" v-model="modelData.propertyTypeMemo" minlength="2" maxlength="120"
									  show-word-limit></el-input>
						</el-form-item>
					</el-col>

				</el-row>

			</el-form>
			<span slot="footer" class="dialog-footer">
            <el-button type="primary" size="mini" @click="onSubmit('modelData')">确 定</el-button>
        </span>
		</el-dialog>

		<el-row>
			<el-col :span="24">
				<el-card>

					<el-table :data="tableData2" border style="width: 100%">
						<el-table-column prop="propertyTypeName" label="属性类型">
						</el-table-column>
						<el-table-column prop="pvCode" label="属性编码"></el-table-column>
						<el-table-column prop="propertyValue" label="属性值"></el-table-column>
						<el-table-column prop="propertyValueMemo" label="属性值说明"></el-table-column>
						<el-table-column label="操作" class-name="operation">
							<template slot="header">
								<el-button type="primary" @click="createMember2">新增</el-button>
							</template>
							<template slot-scope="scope">
								<el-link type="primary" @click="editShow2(scope.row)">编辑</el-link>
								<el-link type="primary" @click="del2(scope.row.pvCode)">删除</el-link>
							</template>
						</el-table-column>
					</el-table>
					<!-- 	<el-pagination background

	layout="total, sizes, prev,pager, next,  jumper" @size-change="sizeChange2" @current-change="currentChange2"

	 :page-sizes="[10, 20, 30, 40]" :page-size="10" :total="total2">

	</el-pagination> -->
				</el-card>
			</el-col>
		</el-row>

		<el-dialog title="属性编辑" :visible.sync="memberModalStatus2" :close-on-click-modal="true" width="40%"
				   :destroy-on-close="true">
			<el-form :model="modelData2" :rules="rulesModelData2" status-icon ref="modelData2" label-width="100px"
					 :inline="false" size="normal">
				<el-row>
					<el-col :span="24">
						<el-form-item label="属性编码" prop="pvCode">
							<!--                        <el-input v-model="modelData2.pvCode" :disabled="this.userMode =='EDIT'?true:false" maxlength="10" show-word-limit> </el-input>-->
							<el-input v-model="modelData2.pvCode" maxlength="10" show-word-limit></el-input>
						</el-form-item>
						<el-form-item label="属性值" prop="propertyValue">
							<el-input v-model="modelData2.propertyValue" maxlength="10" show-word-limit></el-input>
						</el-form-item>

						<el-form-item label="属性类型" prop="ptCode">
							<el-select v-model="modelData2.ptCode" placeholder="请选择">
								<el-option v-for="item in options" :key="item.ptCode"
										   :label="item.ptCode+item.propertyTypeName" :value="item.ptCode">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="属性值说明" prop="propertyValueMemo">
							<el-input
									type="textarea"
									:rows="5"
									placeholder="请输入内容"
									v-model="modelData2.propertyValueMemo"
									maxlength="150"
									show-word-limit>
							</el-input>
						</el-form-item>
					</el-col>

				</el-row>

			</el-form>
			<span slot="footer" class="dialog-footer">
            <el-button type="primary" size="mini" @click="onSubmit2('modelData2')">确 定</el-button>
        </span>
		</el-dialog>
	</div>
</template>

<script>
// import axios from 'axios';
import axios from "@/api/request.js";

export default {
	name: "UnitC",
	data() {
		return {
			propertyTypeId: "1",
			options: [],
			pageNum: 1,
			size: 5,
			total: 0,
			pageNum2: 1,
			size2: 50,
			total2: 0,
			searchForm: {
				userName: "",
				userLevel: 0
			},
			searchData: {
				pageNumber: 1,
				pageSize: 5,
				checkedCities: [localStorage.getItem('SYS_TYPE')]
			},
			tableData: [],
			tableData2: [],
			modelData: {},
			memberModalStatus: false,
			modelData2: {},
			memberModalStatus2: false,
			userMode: "CREATE",
			townIndex: 0,
			typeid: 0,
			rulesModelData: {
				propertyTypeName: [
					{
						required: true,
						message: '属性类别不能为空',
						trigger: 'blur'
					},
					{
						min: 2,
						max: 12,
						message: '属性类别不能为空，长度在 2 到 12 个字符',
						trigger: 'blur'
					}
				],
				ptCode: [
					{
						required: true,
						message: '属性类别编码不能为空',
						trigger: 'blur'
					},
					{
						min: 2,
						max: 12,
						message: '属性类别编码，长度在 2 到 12 个字符',
						trigger: 'blur'
					}
				],
				propertyTypeMemo: [{
					required: true,
					message: '属性类别描述不能为空',
					trigger: 'blur'
				},
					{
						min: 2,
						max: 120,
						message: '属性类别描述，长度在 2 到 120 个字符',
						trigger: 'blur'
					}
				]
			},
			rulesModelData2: {
				pvCode: [
					{
						required: true,
						message: '属性编码不能为空',
						trigger: 'blur'
					},
					{
						min: 2,
						max: 12,
						message: '属性编码不能为空，长度在 2 到 12 个字符',
						trigger: 'blur'
					}
				],
				propertyValue: [
					{
						required: true,
						message: '属性值不能为空',
						trigger: 'blur'
					},
					{
						min: 1,
						max: 12,
						message: '属性值不能为空，长度在 1 到 12 个字符',
						trigger: 'blur'
					}
				]
			}
		};
	},

	mounted() {

		this.list();
		//this.list2();
		this.types();
	},
	/*    computed:{
		  ...mapState({
			options: (state) => state.VillageData.Village,
		  }),
		}, */
	methods: {
		searchSubject () {
			this.list()
		},
		resetValues () {
			this.searchData.propertyTypeName = ''
			this.searchData.ptCode = ''
		},
		handleCurrentChange(val) {
			this.list3(val.ptCode);

		},
		sizeChange2(val) {
			console.log(val);
			this.size2 = val;
			this.list2();
		},
		currentChange2(val) {
			console.log(val);
			this.pageNum2 = val;
			this.list2();
		},
		sizeChange(val) {
			console.log(val);
			this.size = val;
			this.list();
		},
		currentChange(val) {
			console.log(val);
			this.pageNum = val;
			this.list();
		},
		list() {
			axios.get(
					"baseinfo/baseInfo/propertyType/selectPage", {
						params: {
							pageNumber: this.pageNum,
							pageSize: this.size,
							"propertyTypeName": this.searchData.propertyTypeName,
							"ptCode": this.searchData.ptCode
						}
					}).then((response) => {
				this.tableData = response.data.list;
				this.total = response.data.total;
			});
		},
		types() {
			axios.get(
					"baseinfo/baseInfo/propertyType/selectPage", {
						params: {
							pageNumber: 1,
							pageSize: 50,
						}
					}).then((response) => {
				this.options = response.data.list;

			});
		},
		list3(ptCode) {
			this.typeid = ptCode;
			axios.get(
					"baseinfo/baseInfo/propertyValue/selectPage", {
						params: {
							pageNumber: this.pageNum2,
							pageSize: this.size2,
							ptCode: ptCode
						}
					}).then((response) => {
				this.tableData2 = response.data.list;
				this.total2 = response.data.total;
			});
		},
		list2() {
			axios.get(
					"baseinfo/baseInfo/propertyValue/selectPage", {
						params: {
							pageNumber: this.pageNum2,
							pageSize: this.size2,
						}
					}).then((response) => {
				this.tableData2 = response.data.list;
				this.total2 = response.data.total;
			});
		},
		createMember() {
			this.memberModalStatus = true;
			this.userMode = "CREATE";
			this.modelData = {};

		},
		///${id}
		editShow(row) {
			this.modelData = row;
			this.memberModalStatus = true;
			this.userMode = "EDIT";
			/* console.log(id);
			this.memberModalStatus = true;
			this.userMode = "EDIT";
			axios.get(
				`baseinfo/baseInfo/propertyType/select`, {

params: {id:id}
				}).then((response) => {
				this.modelData = response.data;

			}); */
		},
		del(id) {
			this.$confirm('是否删除?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				axios.get(
						`baseinfo/baseInfo/propertyType/delete`, {
							params: {
								id: id
							}
						}).then((response) => {
					this.list();
					this.$message.success("删除成功");
				});
			}).catch(() => {
			});

		},
		editMember() {
			this.memberModalStatus = true;
			this.userMode = "EDIT";

		},
		onSubmit(formName) {

			this.$refs[formName].validate((valid) => {
				if (valid) {

					if (this.userMode === 'EDIT') {
						axios.post(
								"baseinfo/baseInfo/propertyType/update", {
									params: {
										/* ptCode: this.modelData.ptCode, */
										propertyTypeName: this.modelData.propertyTypeName,
										ptCode: this.modelData.ptCode,
										propertyTypeMemo: this.modelData.propertyTypeMemo,
									}
								}
						)
								.then(result => {
									console.log("******" + result.data)
									this.list();
								});
					}
					if (this.userMode === 'CREATE') {
						axios.post(
								"baseinfo/baseInfo/propertyType/insert", {
									params: this.modelData
								}
						)
								.then(result => {
									console.log("******" + result.data)
									this.list();
								});

					}
					this.memberModalStatus = false;
					this.modelData = {};
					this.$message.success("操作完成");
				} else {
					console.log('error submit!!');
					return false;
				}
			});

		},

		/**以下属性项的函数**/
		createMember2() {
			this.memberModalStatus2 = true;
			this.userMode = "CREATE";
			this.modelData2 = {};
			this.types();
			this.modelData2.ptCode = this.typeid;
		},
		editShow2(row) {
			this.types();
			this.modelData2 = row;
			// console.log(id);
			this.memberModalStatus2 = true;
			this.userMode = "EDIT";
			/* axios.get(
				`baseinfo/baseInfo/propertyValue/getById`, {

params: {id:id}
				}).then((response) => {
				this.modelData2 = response.data;
				this.modelData2.propertyTypeId=this.typeid;
			}); */
		},
		del2(id) {
			this.$confirm('是否删除?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				axios.get(
						`baseinfo/baseInfo/propertyValue/delete`, {
							params: {
								id: id
							}
						}).then((response) => {
					this.list3(this.typeid);
					this.$message.success("删除成功");
				});
			}).catch(() => {
			});

		},
		editMember2() {
			this.memberModalStatus2 = true;
			this.userMode = "EDIT";

		},
		onSubmit2(formName) {

			this.$refs[formName].validate((valid) => {
				if (valid) {
					if (this.userMode === 'EDIT') {
						axios.post(
								"baseinfo/baseInfo/propertyValue/update", {
									params: {
										pvCode: this.modelData2.pvCode,
										propertyValueMemo: this.modelData2.propertyValueMemo,
										propertyValue: this.modelData2.propertyValue,
										ptCode: this.modelData2.ptCode,
									}
								}
						)
								.then(result => {
									console.log("******" + result.data)
									this.list3(this.typeid);
								});
					}
					if (this.userMode === 'CREATE') {

						axios.post(
								"baseinfo/baseInfo/propertyValue/insert", {
									params: this.modelData2
								}
						)
								.then(result => {
									console.log("******" + result.data)
									this.list3(this.typeid);
								});

					}

					this.memberModalStatus2 = false;
					this.modelData2 = {};
					this.$message.success("操作完成");
				} else {
					console.log('error submit!!');
					return false;
				}
			});

		}
	},
};
</script>

<style lang="scss">
.UnitC {
	background-color: #fff;
	padding: 20px;

	.el-form {
		padding: 0;

		.el-form-item__label {
			white-space: nowrap;
		}
	}

	.el-pagination {
		display: flex;
		justify-content: flex-end;
		margin-top: 20px;
		text-align: right;
	}

	.button-group {
		margin: 20px 0;

		.el-button {
			width: 130px;
			margin-right: 10px;
		}
	}

	.choicemember {
		.el-form-item__content {
			display: flex;
		}
	}

	.el-link {
		margin: 0 5px;
	}

	.el-dialog {
		.el-dialog__title {
			font-size: 16px;
			font-weight: 700;
		}

		.el-dialog__body {
			padding: 0 40px;

			.el-form-item__label {
				text-align: left;
			}
		}

		.dialog-footer {
			display: flex;
			justify-content: center;

			.el-button {
				padding: 5px 30px;
			}
		}

		.tab-flex {
			.el-button {
				padding-top: 9px;
				padding-bottom: 9px;
			}
		}

	}
}
</style>
